//import 导入 意为 '导入 模块儿 从 react 模块儿导入'
import React,{ Component } from 'react';
import {
    AppRegistry, // 注册APP入口
    StyleSheet, //样式表组件
    Image, //添加image组件
    TextInput, //
    TouchableHighlight, //触摸高亮效果
    TouchableOpacity,  //触摸透明效果
    Text, //文字组件,它里面只能放文字 类似于 span 标签
    View //结构组件,它类似于 div 标签
} from 'react-native';
/*Touchable 类组件

TouchableHighlight:高亮触摸，用户点击时，会产生高亮效果
TouchableOpacity 透明触摸，用户点击时，点击的组件会出现透明的效果
TouchableWithoutFeedback：无反馈性触摸，用户点击时，点击的组件不会出现任何视觉变化

TouchableHighlight组件的属性如下：
activeOpacity：触摸时透明度的设置
onHideUnderlay：隐藏背景阴影时触发该事件
onShowUnderlay：出现背景阴影时触发该事件
underlayColor：点击时背景阴影效果的背景颜色

Image 组件
此组件调用的图片途径比较多，例如网络图片，本地磁盘图片，照相机的图片

resizeMode 枚举类型，其值为cover，contain，stretch。表示图片适应的模式

source 图片的引用地址，值为{uri:string} 如果是一个本地的静态资源，那么需要使用require('image!name')包裹

defaultSource IOS支持的属性，表示默认的图片地址，如果网络图片加载完成，将取代defaultSource
onLoad IOS支持的属性，加载成功时候触发事件
onLoadEnd IOS支持的属性，不管加载成功或者失败，都触发该事件
onLoadStart IOS支持的属性，加载开始时候触发该事件
onProgress IOS支持的属性，加载过程的进度事件*/

//创建一个 MyApp 组件
class MyApp extends Component{
    aa(){
        //alert('清风宝剑孤城泪');
    }
    render(){
        return(<View style={styles.wp}>
                <TouchableHighlight activeOpacity={0.5} onPress={this.aa} underlayColor="#fff">
                    <Text style={styles.textBtn}>点击</Text>
                </TouchableHighlight>
                <TouchableOpacity onPress={this.aa}
              >
                     <Text style={styles.textBtn}>点击</Text>
               </TouchableOpacity>
            </View>);
    }
}

//设置样式
const styles = StyleSheet.create({
  wp:{
      marginTop:40,
  },
   textBtn:{
       backgroundColor:'#00f',
       color:'#fff',
       height:30,
       lineHeight:30,
       width:100,
       textAlign:'center'
   }
});


//注册app,其中 'myapp'是指工程名,'MyApp'是创建的组件名
AppRegistry.registerComponent('myapp', () => MyApp);